<%var csstpl = {%>
<style>
	.icons-list i {
		cursor: pointer;
	}
	
	.toggle-btn {
		cursor: pointer;
	}
	
	.hide_sub:before {
		content: "\e602";
	}
	
	.show_sub:before {
		content: "\e61a";
	}
</style>
<%};%>
<%var jstpl = {%>
<script>
	var app = new Vue({
		el: "#gexin_body",
		data: {
			query: {
				pid: "",
				pageNumber: 1,
				pageSize: 10
			},
			data_result: {},
			pid:"",
			sort:""
		},
		created: function() {
			this.loadPage("init")
		},
		methods: {
			loadPage: function(model) { //载入模式有两种  init初始化载入 load分页载入
				if(model == "init") {
					this.query.pageNumber = 1;
				}
				Ajax("/system/dict/query", this.query, function(d) {
					app.data_result = d.pageData;
					if(d.pageData.firstPage == true) {
						layui.laypage.render({
							elem: 'gexin_page' //注意，这里的 test1 是 ID，不用加 # 号
								,
							layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
							count: d.pageData.totalRow //数据总数，从服务端得到
								,
							limit: app.query.pageSize,
							jump: function(obj, first) {
								app.query.pageNumber = obj.curr;
								if(app.query.pageSize != obj.limit) {
									app.query.pageSize = obj.limit;
									app.loadPage("init");
									return;
								}
								if(!first) {
									app.loadPage("load");
								}
							}
						});
					}
				})
			},
			dictEdit: function(id,sort) { //回填编辑弹出层
				this.sort=sort;
				gx.ajax("/system/dict/info/" + id, function(d) {
					for(var item in d) {
						$("#compose-mail input[name='dict." + item + "']").val(d[item]);
						if(item == "state") {
							if(d[item] == 1) {
								$("#compose-mail input[name='dict." + item + "']").prop('checked', true);
							} else {
								$("#compose-mail input[name='dict." + item + "']").prop('checked', false);
							}
						}
					}
					form.render("checkbox");
					$('#compose-mail').modal('show')
				})
			},
			delDict: function(id) { //删除
				gx.confirm("你是否确定删除这条信息？", function() {
					gx.ajax('/system/dict/delete/' + id, function(d) {
						if(d.state == true) {
							layer.closeAll();
							if(app.dictInfo != null) {
								app.query.pid = app.dictInfo.id;
							}
							app.loadPage("load");
						} else {
							gx.alert(d.msg);
						}
					})
				})
			},
			addDict: function(id) { //添加弹出层
				this.pid=id;
				this.sort=null;
				$("#parent_id").val(id);
				$("#add_saveform")[0].reset();
				$("#dict_id").val("");
				$('#compose-mail').modal('show');
			}
		}
	})

	var form = layui.form;
	//监听提交
	form.on('submit(formDemo)', function(data) {
		Ajax('/system/dict/addsave', data.field, function(d) {
			if(d.state == true) {
				layer.msg("数据提交成功！")
				layer.closeAll();
					$('#compose-mail').modal('hide');
					if(app.dictInfo != null) {
						app.query.pid = app.dictInfo.id;
					}
					app.loadPage("load");
					if(app.sort!=(data.field["dict.sort_order"])&&app.sort!=null){
						window.location.reload();
					}else{
						//延迟显示 因为渲染需要时间
						setTimeout(function(){
							$("tr[data-sub='" + app.pid  + "']").show();
							$("td[data-id='"+app.pid+"']").find(".layui-icon").addClass("show_sub");
						},500)
					}
			} else {
				gx.alert(d.msg)
			}
		})
	});

	//自定义验证字典名称或值是否重复
	form.verify({
		checkRepeti: function(value, item) {
			var dict_id = $("#dict_id").val();
			var trueOrFalse = false;
			$.ajax({
				url: "/system/dict/checkRepeti?type=busi_name&value=" + value + "&dict_id=" + dict_id+"&pid="+app.pid,
				async: false,
				success: function(d) {
					if(d.state == true) {
						trueOrFalse = true;
					}
				}
			})

			if(trueOrFalse) {
				return '字典名称或值重复!';
			}
		},
		checkRepetiValue: function(value, item) {
			var dict_id = $("#dict_id").val();
			var trueOrFalse = false;
			$.ajax({
				url: "/system/dict/checkRepeti?type=busi_value&value=" + value + "&dict_id=" + dict_id+"&pid="+app.pid,
				async: false,
				success: function(d) {
					if(d.state == true) {
						trueOrFalse = true;
					}
				}
			})

			if(trueOrFalse) {
				return '字典名称或值重复!';
			}
		}
		
	})
	$(function() {
		$("#content").on("click", ".toggle-btn", function() {
			var id = $(this).data("id");
			$(this).find(".layui-icon").toggleClass("show_sub");
			$("tr[data-sub='" + id + "']").toggle();
		})
	})
</script>
<%};%>
<%var title={%> 数字字典管理
<%};%>
<%layout("../layout/_layout_layui.html",{title:title,jstpl:jstpl,csstpl:csstpl}){%>
<div class="layui-row" id="content">
	<section>
		<div class="layui-col-md2 ">
			<a @click="addDict(0)" id="addbtn" class="layui-btn"><i class="layui-icon">&#xe608;</i> 添加字典</a>
		</div>
		<!-- 内容开始 -->
		<div class="layui-col-md12" style="margin-top: 20px">
			<table class="layui-table ">
				<thead>
					<tr>
						<th>数据名称</th>
						<th>数据值</th>
						<th>状态</th>
						<th>排序</th>
						<th></th>
					</tr>
				</thead>

				<tbody v-for="d in data_result.list">
					<tr>
						<td class="toggle-btn" :data-id="d.id"><i class="layui-icon  hide_sub" ></i>
							<i style="display: none;" class="layui-icon">&#xe619;</i> {{d.busi_name}}</td>
						<td>{{d.busi_value}}</td>
						<td>{{d.state==1?'有效':'无效'}}</td>
						<td>{{d.sort_order}}</td>
						<td>
							<div class="layui-btn-group">
								<button class="layui-btn  layui-btn-sm" @click="dictEdit(d.id,d.sort_order)"><i class="layui-icon">&#xe642;</i>编辑</button>
								<button class="layui-btn  layui-btn-sm" @click="delDict(d.id)"><i class="layui-icon">&#xe640;</i>删除</a>
							<button class="layui-btn  layui-btn-sm" @click="addDict(d.id)"><i class="layui-icon">&#xe654;</i>添加字典值</a>
							</div>
						</td>
        			</tr>
        			<tr  v-for="t in d.sub" :data-sub="d.id" style="display: none;">
						<td style="padding-left:50px;"><span class="layui-badge-dot "></span>  {{t.busi_name}}</td>
						<td>{{t.busi_value}}</td>
						<td>{{t.state==1?'有效':'无效'}}</td>
						<td>{{t.sort_order}}</td>
						<td>
							<div class="layui-btn-group">
							<button class="layui-btn layui-btn-primary layui-btn-sm" @click="dictEdit(t.id,t.sort_order)"><i class="layui-icon">&#xe642;</i>编辑</button>
							<button class="layui-btn layui-btn-primary layui-btn-sm" @click="delDict(t.id)"><i class="layui-icon">&#xe640;</i>删除</a>
							</div>
						</td>
        			</tr>
        			</tbody>
        		<tbody id="tbody_body" v-if="data_result.list==0">
					<tr >
					 <td  colspan="5" style="text-align:center;height:300px"><h1>没有数据</h1></td>
					</tr>
				</tbody>
			</table>
			<fieldset id="gexin_page" class="layui-elem-field layui-field-title" ></fieldset>
		</div>
		
		<!-- 弹出框开始  -->
		<div class="modal fade" id="compose-mail" tabindex="-1" role="dialog"
			aria-hidden="true">
			<form id="add_saveform" class="layui-form form-horizontal ">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title">
								添加/修改数据字典
							</h4>
						</div>
						<!-- 弹出框内容  -->
						<div class="modal-body">
							<div class="layui-row layui-col-space15">
								
								<input type="hidden" id="dict_id" name="dict.id">

								<div class="layui-form-item">
									<label class="layui-form-label">数据名称</label>
									<div class="layui-input-block">
										<input class="layui-input" type="text"  lay-verType="tips"  lay-verify="required|checkRepeti" placeholder="请输入数据名称" name="dict.busi_name">	
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">数据值</label>
									<div class="layui-input-block">
										<input class="layui-input" type="text" lay-verType="tips" lay-verify="required|checkRepetiValue" placeholder="请输入数据值" name="dict.busi_value" >
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">状态</label>
									<div class="layui-input-block">
										<input type="checkbox" checked value="1" name="dict.state" lay-skin="switch" lay-text="有效|无效">
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">排序</label>
									<div class="layui-input-block">
										<input type="text" lay-verType="tips" lay-verify="required|number" name="dict.sort_order" maxlength="3" class="layui-input">
										<p class="layui-text" style="color: #FF5722;">数值越大越靠前</p>	
									</div>
								</div>
								
							 <input  type="hidden" id="parent_id" name="dict.parent_id">  
								
							</div>
							
						</div>
						
						<div class="modal-footer">
							<div class="layui-form-item">
								<div class="layui-input-block">
									<button type="button" class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
								<button type="button" data-dismiss="modal" class="layui-btn layui-btn-primary">关闭</button>
							</div>
		</div>
</div>

</div>
</div>
</form>
</div>
<!--  弹出框结束 -->
</section>
</div>
<%}%>